<template>
  <div class="inviteFriends hideScrollBar" ref="scrollEl">
    <!-- 导航 -->
    <NavBar
      :title="$t('inviteFriends.yqhyjl')"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#FFF"
      :scrollEl="scrollEl"
      isFixed
    />
    <!-- 背景渐变色 -->
    <div class="inviteFriends-bg">
      <div class="inviteFriends-bg-item"></div>
      <div class="inviteFriends-bg-item"></div>
    </div>
    <!-- 头部 -->
    <div class="header">
      <img class="header-bg" src="/image/lottery-v3/inviteFriends-bg.svg" />
      <!-- 活动说明 -->
      <div class="header-rightdesc" @click="jumpPage('statistics')">
        <img
          class="header-rightdesc-icon"
          src="/image/lottery-v3/invite-friends-desc-icon.svg"
        />
      </div>
    </div>
    <!-- 奖励说明 -->
    <div class="group">
      <!-- 注册 -->
      <div class="reward">
        <div class="reward-title">
          {{ $t("lotteryMoney.hyzcnkhd").split("xxx")[0] }}
          <span style="color: #007bff"
            >({{ inviteFriends.friendRegisterPrize.finishCount }}/{{
              inviteFriends.friendRegisterPrize.totalCount
            }})</span
          >
          {{ $t("lotteryMoney.hyzcnkhd").split("xxx")[1] }}
        </div>
        <div class="reward-info">
          <!-- 免费下注 -->
          <div class="reward-info-item items-center">
            <div class="reward-info-item-text">
              {{ $t("lotteryMoney.mfxzText") }}
            </div>
            <div class="items-center">
              <div class="reward-info-item-value">
                +{{
                  inviteFriends.friendRegisterPrize.inviteFreeDrawCount || 0
                }}
              </div>
              <img class="reward-info-item-icon" src="/image/bet-blue.svg" />
            </div>
          </div>
          <!-- 质押收益率 -->
          <div class="reward-info-item items-center">
            <div class="reward-info-item-text">APY</div>
            <div class="items-center">
              <div class="reward-info-item-value">
                +
                {{
                  new Decimal(
                    inviteFriends.friendRegisterPrize.pledgeBonusRate || 0
                  ).mul(100)
                }}
              </div>
              <img
                class="reward-info-item-icon"
                src="/image/pledge-green.svg"
              />
            </div>
          </div>
          <!-- BDC -->
          <div class="reward-info-item items-center" style="margin-bottom: 0">
            <div class="reward-info-item-text">BDC</div>
            <div class="items-center">
              <div class="reward-info-item-value">
                + {{ inviteFriends.friendRegisterPrize.prizeAmount || 0 }}
              </div>
              <img class="reward-info-item-icon" src="/image/bdc2.svg" />
            </div>
          </div>
        </div>
        <!-- 底部 icon -->
        <img
          class="reward-bottom"
          src="/image/lottery-v3/inviteFriendsView-bt-img.svg"
        />
      </div>
      <!-- 充值 -->
      <div class="reward">
        <div class="reward-title">
          {{ $t("lotteryMoney.hycznkyhd").split("xxx")[0] }}
          {{ $t("inviteFriends.wsx") }}
          {{ $t("lotteryMoney.hycznkyhd").split("xxx")[1] }}
        </div>
        <div class="reward-info">
          <!-- 免费下注 -->
          <div class="reward-info-item items-center">
            <div class="reward-info-item-text">
              {{ $t("lotteryMoney.mfxzText") }}
            </div>
            <div class="items-center">
              <div class="reward-info-item-value">
                +{{
                  inviteFriends.friendFirstDepositPrize.inviteFreeDrawCount || 0
                }}
              </div>
              <img class="reward-info-item-icon" src="/image/bet-blue.svg" />
            </div>
          </div>
          <!-- 质押收益率 -->
          <div class="reward-info-item items-center">
            <div class="reward-info-item-text">APY</div>
            <div class="items-center">
              <div class="reward-info-item-value">
                +
                {{
                  new Decimal(
                    inviteFriends.friendFirstDepositPrize.pledgeBonusRate || 0
                  ).mul(100)
                }}
              </div>
              <img
                class="reward-info-item-icon"
                src="/image/pledge-green.svg"
              />
            </div>
          </div>
          <!-- BDC -->
          <div class="reward-info-item items-center">
            <div class="reward-info-item-text">BDC</div>
            <div class="items-center">
              <div class="reward-info-item-value">
                + {{ inviteFriends.friendFirstDepositPrize.prizeAmount || 0 }}
              </div>
              <img class="reward-info-item-icon" src="/image/bdc2.svg" />
            </div>
          </div>
          <!-- 宝箱 -->
          <div
            class="reward-chest items-center"
            @click.stop="isShowConversionDesc = true"
          >
            <div class="reward-chest-desc">
              {{ $t("lotteryMoney.yyChest") }}
            </div>
            <img
              class="reward-chest-left"
              src="/image/lottery-v3/lotteryV3-reward-chest.png"
            />
            <!-- <div
              class="reward-chest-text"
              v-if="
                inviteFriends.luckyBoxList &&
                inviteFriends.luckyBoxList.length > 0
              "
            >
              *{{
                inviteFriends.luckyBoxList
                  ? inviteFriends.luckyBoxList.length
                  : 0
              }}
            </div> -->
            <!-- <img class="reward-chest-right" src="/image/jt-right-icon.svg" /> -->
          </div>
        </div>
        <!-- 底部 icon -->
        <img
          class="reward-bottom"
          src="/image/lottery-v3/inviteFriendsView-bt-img.svg"
        />
      </div>
      <!-- 交易 -->
      <div class="reward" style="margin-bottom: 0">
        <div class="reward-title">
          {{ $t("lotteryMoney.hyjynkyhd") }}
        </div>
        <div class="reward-info">
          <!-- 美元 -->
          <div
            class="reward-info-item minh47 items-center"
            style="margin-bottom: 0"
          >
            <div class="reward-info-item-text">
              {{ $t("lotteryMoney.hyjyDesc").split("xxx")[0] }}
              3
              {{ $t("lotteryMoney.hyjyDesc").split("xxx")[1] }}
            </div>
            <div class="items-center">
              <div class="reward-info-item-value">${{ 3 }}</div>
              <img class="reward-info-item-icon" src="/image/money-green.svg" />
            </div>
          </div>
        </div>
        <!-- 底部 icon -->
        <img
          class="reward-bottom"
          src="/image/lottery-v3/inviteFriendsView-bt-img.svg"
        />
      </div>
    </div>
    <!-- 被邀请人奖励 -->
    <div class="group">
      <div class="reward">
        <div class="reward-title">
          {{ $t("lotteryMoney.ndpykyhd") }}
        </div>
        <div class="reward-info">
          <!-- 免费下注 -->
          <div class="reward-info-item items-center">
            <div class="reward-info-item-text">
              {{ $t("lotteryMoney.mfxzText") }}
            </div>
            <div class="items-center">
              <div class="reward-info-item-value">
                +{{ inviteFriends.friendNewUserBonusCount || 0 }}
              </div>
              <img class="reward-info-item-icon" src="/image/bet-blue.svg" />
            </div>
          </div>

          <!-- BDC -->
          <div class="reward-info-item items-center" style="margin-bottom: 0">
            <div class="reward-info-item-text">BDC</div>
            <div class="items-center">
              <div class="reward-info-item-value">
                + {{ inviteFriends.friendPrizeAmount || 0 }}
              </div>
              <img class="reward-info-item-icon" src="/image/bdc2.svg" />
            </div>
          </div>
        </div>
        <!-- 底部 icon -->
        <img
          class="reward-bottom"
          src="/image/lottery-v3/inviteFriendsView-bt-img.svg"
        />
      </div>
    </div>
    <!-- 邀友统计 -->
    <div class="group statistics">
      <!-- 我的奖励 -->
      <div class="statistics-top items-center" @click="jumpPage('statistics')">
        <div class="statistics-top-left">
          {{ $t("lotteryMoney.myJl") }}
        </div>
        <img class="statistics-top-right" src="/image/jt-right-icon.svg" />
      </div>
      <!-- 数量 -->
      <div class="statistics-center items-center">
        <!-- 免费下注 -->
        <div class="statistics-center-item">
          <div class="statistics-center-item-num">
            {{ inviteFriends.historyStatistics.totalInviteFreeDrawCount || 0 }}
          </div>
          <div class="statistics-center-item-text">
            {{ $t("lotteryMoney.mfxzText") }}
          </div>
        </div>
        <div class="statistics-center-line"></div>
        <!-- BDC -->
        <div class="statistics-center-item">
          <div class="statistics-center-item-num">
            {{
              toThousands(inviteFriends.historyStatistics.totalPrizeAmount || 0)
            }}
            BDC
          </div>
          <div class="statistics-center-item-text">BDC</div>
        </div>
        <div class="statistics-center-line"></div>
        <!-- 质押收益率 -->
        <div class="statistics-center-item">
          <div class="statistics-center-item-num">
            +{{
              new Decimal(
                inviteFriends.historyStatistics.totalInviteBonusRate || 0
              ).mul(100)
            }}%
          </div>
          <div class="statistics-center-item-text">APY</div>
        </div>
      </div>
      <!-- 邀友总人数 -->
      <div class="statistics-bottom items-center">
        <img
          class="statistics-bottom-icon"
          src="/image/title-yellow-icon.svg"
        />
        <div class="statistics-bottom-text">
          {{ $t("lotteryMoney.ljyyrs") }}
        </div>
        <div class="statistics-bottom-num">
          {{ inviteFriends.historyStatistics.totalInviteUserCount || 0 }}
        </div>
      </div>
    </div>
    <!-- 底部邀请按钮 -->
    <div class="footer" v-if="inviteFriends && inviteFriends.inviteCode">
      <div class="footer-top items-center">
        <div class="footer-top-left">{{ $t("lotteryMoney.lj") }}</div>
        <!-- 地址 -->
        <div class="footer-top-center">
          {{ shareUrl }}
        </div>
        <!-- 复制按钮 -->
        <img
          class="footer-top-copy"
          src="/image/inviteFriends/footer-yellow-copy.svg"
          @click="saveCopy"
        />
      </div>
      <!-- 按钮 -->
      <div class="footer-bottom" @click="shareApp">
        {{ $t("inviteFriends.fxghy") }}
      </div>
    </div>
    <!-- 转化宝箱介绍 -->
    <ConversionDescPopup
      v-if="isShowConversionDesc"
      v-model:show="isShowConversionDesc"
      @confirm="shareApp"
    ></ConversionDescPopup>
    <!-- 转化宝箱弹窗 -->
    <ConversionChestPopup
      v-if="isShowConversionChest"
      v-model:show="isShowConversionChest"
      :source="inviteFriends.luckyBoxList"
    ></ConversionChestPopup>
  </div>
</template>
<script setup name="inviteFriends">
import {
  toThousands,
  navigateI18nTo,
  getOssFileUrl,
  decimalToLength,
} from "@/utils";
import { inviteInfoApp } from "@/api/user";
import { getMyJackpotInviteInfo } from "@/api/inviteFriends";
import { useClipboard } from "@vueuse/core";
import { useGlobalStore } from "~~/store/global";
import { usePageVisibility } from "@vant/use";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";
import Decimal from "decimal.js";

// 转化宝箱介绍
const ConversionDescPopup = defineAsyncComponent(() =>
  import("@/components/invite-friends/conversion-desc-popup.vue")
);
// 转化宝箱弹窗
const ConversionChestPopup = defineAsyncComponent(() =>
  import("@/components/invite-friends/conversion-chest-popup.vue")
);

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}
const lotteryStore = useLotteryV3Store();

const scrollEl = ref();
const route = useRoute();
const { t } = useI18n();
console.log("页面参数:", route.query);
// firebase埋点
const firebase = useInitFirebase();

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
  sharePage: "/invite-friends/v3/invite",
});

const isShowConversionDesc = ref(false);
const isShowConversionChest = ref(false);

/**
 * @description: 页面信息查询
 */
const inviteFriends = ref({
  friendRegisterPrize: {},
  historyStatistics: {},
  friendFirstDepositPrize: {},
}); // 邀请好友页面信息
const getMyJackpotInviteInfoRequest = () => {
  return getMyJackpotInviteInfo().then((res) => {
    console.log("页面信息:", res);
    /********** zhjdebugger **********/
    // res.luckyBoxList = [
    //   {
    //     id: 190,
    //   },
    //   {
    //     id: 191,
    //   },
    // ];
    /********** zhjdebugger **********/
    if (res) {
      inviteFriends.value = res;
      lotteryStore.$patch((state) => {
        state.inviteLotteryCode = res.inviteCode;
      });
      if (res.luckyBoxList && res.luckyBoxList.length > 0) {
        isShowConversionChest.value = true;
      }
    }
  });
};

// 分享地址
const shareUrl = computed(() => {
  return (
    file.sharePage +
    "?hiddenBar=1" +
    `&language=${globalStore.$state.language}` +
    `&packageId=${globalStore.$state.packageId}` +
    `&sourceType=12` +
    `&code=${lotteryStore.$state.inviteLotteryCode}`
  );
});

// 页面可见状态(当前页面是否进入后台) https://vant-contrib.gitee.io/vant/#/zh-CN/use-page-visibility
const pageVisibility = usePageVisibility();
const stopWatch = watch(pageVisibility, (value) => {
  // 1. 进入后台
  if (value == "visible") {
    console.warn("从后台, 进入-前台");
    getMyJackpotInviteInfoRequest();
  }
  // 2. 进入前台
  else {
    console.warn("此刻,从前台, 进入-后台:", Date.now());
  }
});

// 已领取美金
const receiveAmount = ref(0);

onMounted(() => {
  // 1. 埋点
  firebase?.logEvent("BDC_H5_lotteryV3_invite_friends_home_PUV");
  // 2. 页面信息查询
  getMyJackpotInviteInfoRequest();
  // 3. 现金
  inviteInfoApp().then((res) => {
    if (res) {
      receiveAmount.value = res.invite.receiveAmount;
    }
  });
});
onBeforeUnmount(() => {
  stopWatch && stopWatch();
});

/**
 * @description: 保存到剪贴板
 */
const saveCopy = () => {
  if (!file.sharePage) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast({
      message: t("mvp.other.bzcjtb"),
      "z-index": 9999999,
    });
  } else {
    copy(shareUrl.value);
    showToast({
      message: t("mvp.other.fzcg"),
      "z-index": 9999999,
    });
  }
};
/****************** 分享 ******************/
let shareLoading = false;
const shareApp = (type) => {
  if (shareLoading) return;
  try {
    shareLoading = true;
    console.log("分享地址:", shareUrl.value);
    bridge.onShare(t("inviteFriends.shareTitle"), shareUrl.value);
  } catch (error) {
    console.log(error);
  } finally {
    // 延时 1s，防止用户连续点击
    setTimeout(() => {
      shareLoading = false;
    }, 1000);
  }
};

/**
 * @description: 页面跳转
 * @param {*} type 页面标识
 * @param {*} isApp 是不是app 原生页面
 */
const jumpPage = async (type, isApp = false) => {
  if (type === "statistics") {
    firebase?.logEvent("BDC_H5_LotteryMoney_statistics_PUV"); // 埋点访问
    await navigateI18nTo({ path: "/lottery-v3/invite-friends/statistics" });
  }
};
</script>
<style lang="scss" scoped>
.inviteFriends {
  position: relative;
  background-color: #f3f3f5;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: calc(var(--safe-area-inset-bottom) + 120 * 2px);

  &-bg {
    display: flex;
    align-items: end;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    width: 100vw;
    height: calc(88 * 2px + 40 * 2px + 140 * 2px);

    &-item {
      width: 140 * 2px;
      height: 140 * 2px;
      background-color: #ffc265;
      filter: blur(130 * 2px);
    }
  }
}

.header {
  position: relative;
  width: 100vw;
  height: 93 * 2px;
  margin-bottom: 8 * 2px;
  &-rightdesc {
    position: absolute;
    z-index: 9;
    top: 10 * 2px;
    right: 0 * 2px;
    padding: 3 * 2px 15 * 2px;
    border-radius: 100px 0px 0 100px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    justify-content: center;
    box-shadow: -8px 8px 32px 0px rgba(0, 0, 0, 0.1);
    &-icon {
      width: 17 * 2px;
      height: 17 * 2px;
    }
  }
  &-bg {
    position: absolute;
    top: -25 * 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 280 * 2px;
  }
}

.group {
  position: relative;
  z-index: 9;
  border-radius: 12 * 2px;
  padding: 10 * 2px;
  background: #fff;
  margin: 0 15 * 2px;
  margin-bottom: 10 * 2px;
}

.reward {
  margin-bottom: 20 * 2px;

  &-title {
    color: #141924;
    font-size: 13 * 2px;
    font-weight: 590;
    text-align: center;
    margin-bottom: 10 * 2px;
  }

  &-info {
    padding: 12 * 2px 10 * 2px;
    border-radius: 8 * 2px;
    border: 1px dashed #ff9b01;
    background: #fff5e5;
    width: 100%;

    &-item {
      justify-content: space-between;
      margin-bottom: 19 * 2px;

      &-text {
        color: #807666;
        font-size: 15 * 2px;
        font-weight: 510;
      }

      &-value {
        color: #d5602e;
        font-size: 17 * 2px;
        font-weight: 700;
      }

      &-icon {
        width: 20 * 2px;
        height: 20 * 2px;
        margin-left: 10 * 2px;
      }
    }
    &-line {
      width: 0.5px;
      height: 18 * 2px;
      background-color: rgba(115, 119, 128, 0.15);
    }
  }
  &-bottom {
    margin-left: calc((100% - 322 * 2px) / 2);
    width: 322 * 2px;
    height: 11 * 2px;
  }

  &-chest {
    justify-content: center;

    &-left {
      width: 88 * 2px;
    }

    &-text {
      color: #d5602e;
      font-size: 15 * 2px;
      font-weight: 700;
      margin: 0 8 * 2px;
    }

    &-right {
      width: 14 * 2px;
    }

    &-desc {
      color: #807666;
      font-size: 15 * 2px;
      font-weight: 590;
      margin-right: 10 * 2px;
    }
  }
}

.minh47 {
  min-height: 45 * 2px;
}

.statistics {
  padding: 15 * 2px 10 * 2px;
  &-top {
    justify-content: space-between;

    padding-bottom: 14 * 2px;
    border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);
    margin-bottom: 14 * 2px;

    &-left {
      color: #141924;
      font-size: 15 * 2px;
      font-weight: 590;
    }

    &-right {
      width: 14 * 2px;
      height: 14 * 2px;
    }
  }

  &-center {
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 14 * 2px;
    border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);
    margin-bottom: 14 * 2px;
    &-line {
      width: 0 * 2px;
      height: 34 * 2px;
      border-right: 0.7 * 2px dashed rgba(115, 119, 128, 0.15);
      margin: 0 14 * 2px;
    }
    &-item {
      min-width: 96 * 2px;
      height: 100%;
      &-num {
        color: #d5602e;
        font-size: 15 * 2px;
        font-weight: 590;
        margin-bottom: 4 * 2px;
      }
      &-text {
        color: #999da7;
        font-size: 12 * 2px;
        font-weight: 400;
      }
    }
  }

  &-bottom {
    &-num {
      color: #d5602e;
      font-size: 15 * 2px;
      font-weight: 600;
    }
    &-text {
      color: #141924;
      font-size: 12 * 2px;
      font-weight: 400;
      margin-right: 8 * 2px;
    }
    &-icon {
      width: 9 * 2px;
      height: 9 * 2px;
      margin-right: 8 * 2px;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  z-index: 19;
  border-radius: 12 * 2px 12 * 2px 0px 0px;
  background: #fff;
  overflow: hidden;
  padding: 15 * 2px;
  box-shadow: 0px -4 * 2px 16 * 2px 0px rgba(0, 0, 0, 0.1);
  &-top {
    width: 100%;
    border-radius: 4 * 2px;
    background: #f0f3fa;
    margin-bottom: 15 * 2px;
    &-left {
      padding: 6 * 2px 0 * 2px;
      margin: 0 8 * 2px;
      color: #999da7;
      font-size: 14 * 2px;
      font-weight: 400;
    }
    &-center {
      @include multi-line-omit(1);
      flex: 1;
      // text-wrap: nowrap;
      // white-space: nowrap;
      color: #141924;
      font-size: 14 * 2px;
      font-weight: 600;
      margin-right: 8 * 2px;
    }
    &-copy {
      height: 100%;
    }
  }
  &-bottom {
    background: linear-gradient(90deg, #ff9b01 0%, #f8b100 100%);
    box-shadow: 0px -8px 8px 0px rgba(0, 0, 0, 0.25) inset;
    text-align: center;
    border-radius: 100px;
    width: 100%;
    color: #fff;
    font-size: 17 * 2px;
    font-weight: 600;
    padding: 11 * 2px 0;
    margin-bottom: var(--safe-area-inset-bottom);
  }
}
</style>
